html {
  overflow-y: scroll;
}

.diy-learning-link {
  background-color: white;
  color: black;
}

main {
  display: flex;
  justify-content: center;
  margin-bottom: 3%;
  
  .main-contents {
    width: 75%;
    max-width: 1500px;

    img {
      width: 80%;
      border-radius: 15px;
      margin-top: 1%;
    }

    ul {
      margin: 2% 0 5% 0%;
      text-align: center;

      h2 {
        text-align: left;
        margin: 8% 0 1% 10%;
        font-size: 30px;
      }

      h1 {
        text-align: left;
        margin: 8% 0 1% 10%;
      }

      li {
        margin: 2% 3% 0 10%;
        text-align: left;
      }
    }
  }
}

@media (max-width: 980px) {
  main {
    margin-bottom: 6%;

    .main-contents {
      width: 90%;

      ul {
        margin: 3% 0 3% 3%;

        h2 {
          margin: 10% 0 1% 10%;
          font-size: 24px;
        }

        li {
          font-size: 15px;
        }
      }
    }
  }
}

@media (max-width: 760px) {
  main {
    margin-bottom: 10%;

    .main-contents ul{
      margin: 3% 0 1% 0;
    }
  }
}

@media (max-width: 550px) {
  main {
  
    .main-contents {
      width: 100%;

      ul {
        margin: 3% 0 1% 0;

        h2 {
          font-size: 20px;
        }

        li {
          font-size: 14px;
        }
      }
    }
  }
}